<template>
  <div>
    <div style="margin: 20px">
      <el-page-header content="运单详情" @back="$router.back()" />
    </div>
    <el-card class="box-card" style="margin: 20px" shadow="never">
      <el-descriptions :column="4">
        <el-descriptions-item label="订单编号">{{
          detail.orderId
        }}</el-descriptions-item>
        <el-descriptions-item label="运单编号">
          <span v-if="detail.id">{{
            detail.id
          }}</span>
          <span v-else>--</span>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{
          detail?.order.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">{{
          getOrderStatus(detail)
        }}</el-descriptions-item>
        <el-descriptions-item label="预计到达日期">{{
          detail?.order?.estimatedArrivalTime
        }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div style="margin: 20px">
      <el-card class="box-card" shadow="never">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title">
              <h3>基本信息</h3>
            </template>
            <h3>发货方</h3>
            <el-descriptions :column="2">
              <el-descriptions-item label="发货方姓名">{{
                detail?.order.senderName
              }}</el-descriptions-item>
              <el-descriptions-item label="发货方电话">{{
                detail?.order.senderPhone
              }}</el-descriptions-item>
              <el-descriptions-item label="发货方地址">
                {{ detail?.order.senderProvince?.name }}{{ detail?.order.senderCity?.name
                }}{{ detail?.order.senderCounty?.name }}
              </el-descriptions-item>
              <el-descriptions-item label="详细地址">{{
                detail?.order.senderAddress
              }}</el-descriptions-item>
            </el-descriptions>
            <h3>收货方</h3>
            <el-descriptions :column="2">
              <el-descriptions-item label="收货方姓名">{{
                detail?.order.receiverName
              }}</el-descriptions-item>
              <el-descriptions-item label="收货方电话">{{
                detail?.order.receiverPhone
              }}</el-descriptions-item>
              <el-descriptions-item label="收货方地址">
                {{ detail?.order.receiverProvince?.name }}{{ detail?.order.receiverCity?.name
                }}{{ detail?.order.receiverCounty?.name }}
              </el-descriptions-item>
              <el-descriptions-item label="详细地址">{{
                detail?.order.receiverAddress
              }}</el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>

    <div style="margin: 20px">
      <el-card class="box-card" shadow="never">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title">
              <h3>运输信息</h3>
            </template>
            <el-steps :active="3" align-center>
              <el-step icon="el-icon-circle-check" title="皇姑区营业部" />
              <el-step icon="el-icon-circle-check" title="沈阳分拣中心" />
              <el-step icon="el-icon-circle-check" title="武昌营业部" />
            </el-steps>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>

    <div style="margin: 20px">
      <el-card class="box-card" shadow="never">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title">
              <h3>货品信息</h3>
            </template>
            <template>
              <el-table :data="tableData" style="width: 100%" show-summary>
                <el-table-column type="index" label="序号" />
                <el-table-column prop="name" label="货品名称" />
                <el-table-column prop="goodsType.name" label="货品类型" />
                <el-table-column prop="weight" label="重量(千克)" />
                <el-table-column prop="volume" label="体积(立方)" />
              </el-table>
            </template>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getTrackDetail } from '@/api/waybill'

export default {
  name: 'WaybillManage',
  data() {
    return {
      activeNames: '1',
      // 详情数据
      detail: {},
      // 表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        id: '',
        orderId: '',
        page: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    getOrderStatus() {
      return (detail) => {
        const status = detail?.order?.status
        if (status === 22000) {
          return '已关闭'
        } else if (status === 23000) {
          return '待取件'
        } else if (status === 23001) {
          return '已取件'
        } else if (status === 23002) {
          return '网点自寄'
        } else if (status === 23003) {
          return '网点入库'
        } else if (status === 23004) {
          return '待装车'
        } else if (status === 23005) {
          return '运输中'
        } else if (status === 23006) {
          return '网点出库'
        } else if (status === 23007) {
          return '待派送'
        } else if (status === 23008) {
          return '派送中'
        } else if (status === 23009) {
          return '已签收'
        } else if (status === 23010) {
          return '拒收'
        } else if (status === 23011) {
          return '已取消'
        } else {
          return ''
        }
      }
    }
  },
  created() {
    this.getTrackDetail()
  },
  methods: {
    handleChange() {
      this.activeNames = '2'
    },
    // 获取订单详情
    async getTrackDetail() {
      // 订单Id
      const id = this.$route.query.id
      const result = await getTrackDetail(id)
      console.log(result)
      this.detail = result.data
      // 表格数据
      this.tableData = result.data.order?.orderCargoDTOS || []
    }
  }
}
</script>

<style>
</style>

